import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15

ApplicationWindow   {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    header: TabBar {
        id: tabBar

        property color backgroundColor: "#36c588"
        property color borderColor: "grey"

        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                                contentWidth + leftPadding + rightPadding)
        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                                 contentHeight + topPadding + bottomPadding)

        spacing: 1

        contentItem: ListView {
            model: tabBar.contentModel
            currentIndex: tabBar.currentIndex

            spacing: tabBar.spacing
            orientation: ListView.Horizontal
            boundsBehavior: Flickable.StopAtBounds
            flickableDirection: Flickable.AutoFlickIfNeeded
            snapMode: ListView.SnapToItem

            highlightMoveDuration: 0
            highlightRangeMode: ListView.ApplyRange
            preferredHighlightBegin: 40
            preferredHighlightEnd: width - 40
        }

        background: Rectangle {
            implicitHeight: 30
            color: tabBar.backgroundColor

            Rectangle {
                color: tabBar.borderColor
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
            }
        }
        TabButton { text: qsTr("我是目录1") }
        TabButton { text: qsTr("我是目录2") }
        TabButton { text: qsTr("我是目录3") }
    }
    //     TabButton { text: qsTr("我是目录1") }
    //     TabButton { text: qsTr("我是目录2") }
    //     TabButton { text: qsTr("我是目录3") }
    // }


    SwipeView {
        id: view
        currentIndex: tabBar.currentIndex
        anchors.fill: parent

        onCurrentIndexChanged: {
            tabBar.currentIndex = currentIndex
            indicator.currentIndex  = currentIndex
        }

        Page {
            id: homeTab
            Label {
                text:"页面一"
            }
        }
        Page {
            id: discoverTab
            Label {
                text:"页面二"
            }
        }
        Page {
            id: activityTab
            Label {
                text:"页面三"
            }
        }
    }
    PageIndicator {
        id: indicator
        count: view.count
        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }


}
